import React,{useState,useEffect} from 'react'
//接口
import {getWeather,getStudent} from '../request/index'
//ECharts
import * as echarts from 'echarts';
import moment from 'moment'
//引入右上角组件
import YouTop from '../components/rightTop/RightTop'
//右下角
import YouBot from '../components/rightBottom/RightBottom'
//旋转木马
import Carouse from '../components/carouse/Carouse';
//下面图片
import securityactive from '../image/security-active.jpg'
import security from '../image/security.jpg'
// zhineng-active
import zhinengactive from '../image/zhineng-active.jpg'
import zhineng from '../image/zhineng.jpg'
// employment-active
import employmentactive from '../image/employment-active.jpg'
import employment from '../image/employment.jpg'
// equipment-active
import equipmentactive from '../image/equipment-active.jpg'
import equipment from '../image/equipment.jpg'

//路由跳
import { NavLink } from 'react-router-dom';
function Home() {
  
    //定义数据状态
    let [weather,setWeather]=useState({})
    //定义状态数据 
    //数据请求 
    useEffect(()=>{
      //获取天气数据
      getWeather({
          unescape: 1,
          version: "v63",
          appid:'41163116',
          appsecret: 'R4L4OLWL'
      }).then(res=>{
          console.log('数据',res.data)
          setWeather(res.data)
      })
      //***** /////////**接受学生分布情况的接口数据*************** */
      getStudent().then(res=>{
        console.log('学生数据',res)
        setWeather(res.data.data.result)
        let option = {
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            icon:'circle',//圆
            textStyle:{
              color:'#fff'
            },
            data: []//标题
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data:Time  //时间间隔
          },
          yAxis: {
            type: 'value'
          },
          series: []
        };
        option.legend.data=res.data.data.result[0].legend.data
        console.log('标题',option.legend.data)
        let newData=res.data.data.result[0].series
        //渲染
        option.series=newData.map((item)=>{
          return {
            name:item.name,
            type:item.type,
            stack:item.stack,
            data:item.data,
            smooth:true,//平滑曲线
            showSymbol:false//结点去除原点
          }
        })
        //执行echrts
        var chartDom = document.querySelector('.zhexian')
        var myChart = echarts.init(chartDom);
        
        myChart.setOption(option);
      })

    },[])    // 空依赖数组意味着仅在组件挂载时执行一次   
    //间隔时间
    const Time=[];
    let now=+new Date();
    for(let a=0;a<4;a++){
      Time.unshift(moment(now).format('HH:mm:ss'))
      now-=2*60*1000
    }
    //底部数据
   const [data,setData]=useState([
    {
      id:1,
      url:zhineng,
      url_a:zhinengactive,
      text:'智能检测',
      active:true,
      path:'/home'
    },
    {
      id:2,
      url:security,
      url_a:securityactive,
      text:'就业态势',
      active:false,
      path:'/wook'
    },
    {
      id:3,
      url:employment,
      url_a:employmentactive,
      text:'安防管理',
      active:false,
      path:'/afgl'
    },
    {
      id:4,
      url:equipment,
      url_a:equipmentactive,
      text:'设备运维',
      active:false,
      path:'/sbyw'
    }
  ])
  //
  useEffect(()=>{
    let lj=window.location.pathname;
    let newData=data.find(item=>item.path==lj);
    //点击active取反
    newData.active=true;
    setData([...data])
  },[])
  return (
    <div className='box'>
      <div className='header'></div>
      <div className='main'>
        <div className='left'>
          <div className='weather'>{/* 左上角天气 */}
            <div className='title'>环境检测……</div>
            <div className='content'>
              <div className='yellow'>
                  <span>{weather.tem}°C</span>
                  <div>
                  <div></div>
                   高温黄色预警
                  </div>
              </div>
              <div className='san'>
                <div>
                  <i className='iconfont icon-Thermometer'>体感</i>
                  <span>{weather.tem}°C</span>
                </div>
                <div>
                  <i className='iconfont icon-fengli'>风力</i>
                  <span>{weather.win_speed}</span>
                </div>
                <div>
                  <i className='iconfont icon-shidu'>湿度</i>
                  <span>{weather.humidity}</span>
                </div>
              </div>
              <div className='tq'>
                <div className='one'>
                  <div className='ooo'>
                    <span>{weather.tem2}°C~{weather.tem1}°C </span> <i className='iconfont icon-yueliang'></i>
                  </div>
                  <div className='jt'>
                    今天 <div></div>
                    {weather.wea}
                  </div>
                </div>
                <div className='one'>
                  <div className='ooo'>
                    <span>{weather.tem}°C~{weather.tem2}°C </span><i className='iconfont icon-icon-test'></i>
                  </div>
                  <div className='jt'>
                    明天 <div></div>
                    {weather.wea}
                  </div>
                </div>
              </div>
            </div>
          </div>
          {/* 学生分布情况 */}
          <div className='studenten'>
            <div className='case'>学生分布情况……</div>
            <div className='zhexian'>
              
            </div>
          </div>
        </div>
        <div className='center'>
          <Carouse></Carouse>
          <div className='bottom' >
            {
              data.map((item,index)=>{
                return (
                  <div>
                    <NavLink  to={item.path}>
                      <img src={item.active==false?item.url:item.url_a}></img>
                      <p>{item.text}</p>
                    </NavLink>
                  </div>
                )
              })
            }
          </div>
        </div>
        <div className='right'>
          <div className='rightTop'>{/* 右上角 */}
            <YouTop></YouTop>
          </div>
          <div className='rightBottom'>{/* /* 右下角 */} 
            <YouBot></YouBot>
          </div>
        </div>
      </div>
    </div>
  )
}

export default Home
